<template>
    <div class="layout">
        <div class="demo-pagination-block">
            <el-pagination
            v-model:currentPage="que.currentpage"
            v-model:pageSize="que.pagesize"
            :page-sizes="[10 ,30, 50, 80, 100]"
            :size="size"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, reactive, toRefs, ref, PropType } from 'vue'
import type { ComponentSize } from 'element-plus'
export default defineComponent({
    name: 'Pagination',
    props: {
        background:{
            type:Boolean,
            default:false
        },
        currentPage:{
            type:Number,
            default:1
        },
        pageSize:{
            type:Number,
            default:20
        },
        total:{
            type:Number,
            default:1
        },
        getList: Function,
    },
    setup(props , {emit}) {
      const state = reactive({
        que:{
            pagesize: 10,
            currentpage: 1,
        },
        loading: false,
      })
      const size = ref<ComponentSize>('default')
      const handleSizeChange = (val) => {
        state.que.pagesize = val
        emit('getList',  state.que)
      }
      const handleCurrentChange = (val) => {
        state.que.currentpage = val
        emit('getList', state.que); // 调用 getList 函数
      }
      onBeforeMount(() => {
          state.que.pagesize = props.pageSize
          state.que.currentpage = state.currentPage
      })
      return {
        ...toRefs(state),
        size,
        handleSizeChange,
        handleCurrentChange
      }
    }
})
</script>
<style scoped>
.layout{
    width: auto;
    height: auto;
    background-color: #FFFFFF;
}
.demo-pagination-block{
    padding: 10px;
    display: flex;
    justify-content: center;
    background-color: #FFFFFF;
}
.demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
}
</style>
  